<!-- 收藏列表 -->
<template>
	<view class="">
    <shopro-navbar back-icon-color="#ff8d1a" :backTextStyle="{color: '#ff8d1a',width: '560rpx', textAlign: 'center'}" backText="我的收藏" :background="{ backgroundColor: 'unset' }"></shopro-navbar>
		<!-- 总收藏数 -->
		<view class="head_box u-flex" v-show="!isEmpty">
			<view class="count-box">
				共
				<text class="all-num">{{ total }}</text>
				件商品
			</view>
      <view class="search-box">
        <text class="u-iconfont uicon-search"></text>
        <input type="text" placeholder="搜索" @confirm="search">
      </view>
		</view>

		<!-- 收藏列表 -->
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
        <view class="collect-list u-flex" v-for="f in favoriteList" :key="f.id">
          <view class="goods-box u-flex u-col-top" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: f.goods_id } })">
            <image class="goods_img"  lazy-load fade-show :src="f.goods.image" mode="aspectFill"></image>
            <view class="u-m-l-20">
              <view class="goods-title u-ellipsis-2 u-m-b-10">{{ f.goods.title }}</view>
              <view v-if="f.goods.subtitle" class="describe-text u-m-b-10 u-ellipsis-1">{{ f.goods.subtitle }}</view>
              <view class="u-flex u-row-between u-col-center u-m-t-20">
                <view class="u-flex u-col-bottom">
                  <view class="price u-m-r-10">{{ f.goods.price }}</view>
                  <view class="origin-price">{{ f.goods.original_price }}</view>
                </view>
                <view class="remove" @click.stop="cancelFavorite(f.goods_id)">删除</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 缺省页 -->
				<shopro-empty
					v-if="isEmpty"
					:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
					tipText="暂无收藏"
					btnText="去首页逛逛"
					@click="$Router.pushTab('/pages/index/index')"
				></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
		<view class="foot_box ">
			<view class="tools-box u-flex u-row-between u-flex-1" v-show="isEdit && !isEmpty">
				<u-checkbox shape="circle" activeColor="#e9b461" @change="onAllSel" v-model="isAllSel"><text>全选</text></u-checkbox>
				<button class="u-reset-button close-btn" @tap="cancelFavorite">取消收藏</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			isEdit: false,
			isAllSel: false, //是否全选
			selList: [],
			favoriteList: [],
			total: 0,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
      search_key: ''
		};
	},
	computed: {},
	onLoad() {
		this.getFavoriteList();
	},
	methods: {
    search(e){
      this.search_key = e.detail.value;
      this.favoriteList = [];
      this.currentPage = 1;
      this.lastPage = 1;
      this.getFavoriteList();
    },

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getFavoriteList();
			}
		},
		// 收藏列表
		getFavoriteList() {
			let that = this;
			let list = [];
			that.loadStatus = 'loading';
			that.$http('user.favoriteList', {
				pre_page: 10,
				page: that.currentPage,
        keyword: that.search_key
			}).then(res => {
				if (res.code === 1) {
					that.total = res.data.total;
					list = res.data.data;
					list.map(item => {
						that.$set(item, 'checked', false);
					});
					that.favoriteList = [...that.favoriteList, ...list];
					that.isEmpty = !that.favoriteList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},

		// 取消收藏
		cancelFavorite(goods_id) {
			let that = this;
			let { favoriteList } = this;
      let selList = [goods_id];

			favoriteList = JSON.parse(JSON.stringify(favoriteList));
			that.$http('goods.favorite', {
				goods_ids: selList
			}).then(res => {
				if (res.code === 1) {
					if (that.isAllSel) {
						that.favoriteList = [];
						that.isEmpty = true;
					} else {
						that.favoriteList = favoriteList.filter(f => !selList.includes(f.goods_id));
						that.total = that.favoriteList.length;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.search-box{
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  .u-iconfont{
    color: #555;
    position: absolute;
    left: 20rpx;
    font-size: 40rpx;
  }
  input{
    width: 400rpx;
    text-align: left;
    padding-left: 70rpx;
    height: 60rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    background: #e5e5e5;
    border-radius: 10rpx;
  }
}
.head_box {
	height: 70rpx;
	padding: 0 30rpx;
  margin-bottom: 20rpx;

	.count-box {
		font-size: 26rpx;
		color: #999;

		.all-num {
			color: #a8700d;
		}
	}
}

.collect-list {
	padding: 30rpx 20rpx;
	background: #fff;
	width: 750rpx;
	margin-bottom: 30rpx;
}

.tools-box {
	height: 100rpx;
	width: 750rpx;
	padding: 0 20rpx;
	background: #fff;
	.close-btn {
		width: 200rpx;
		line-height: 70rpx;
		background: linear-gradient(to bottom, #ffc68d, #ff8d1a);

		border-radius: 35rpx;
		padding: 0;
		color: #fff;
	}
}

.goods-box {
  position: relative;
  .goods_img{
    width: 140rpx;
    height: 140rpx;
    border-radius: 6rpx;
    margin: 10rpx;
  }
  .goods-title {
    font-size: 24rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    width: 520rpx;
    line-height: 40rpx;
  }

  .describe-text {
    font-size: 22rpx;
    width: 520rpx;
    color: $u-type-info-disabled;
  }

  .price {
    color: $u-type-error;
    font-weight: 600;
    &::before {
      content: '￥';
      font-size: 20rpx;
    }
  }
  .origin-price {
    color: $u-type-info-disabled;
    font-size: 24rpx;
    text-decoration: line-through;
    &::before {
      content: '￥';
      font-size: 20rpx;
    }
  }
  .remove{
    background: $u-main-color;
    color: $u-type-warning;
    padding: 3rpx 30rpx;
    font-size: 20rpx;
  }
}
</style>
